<template>
  <div class="singer-detail">
    <!-- 头部 -->
    <div class="detail-header">
      <div class="singer-img">
        <img v-lazy="singList.cover" alt="">
      </div>
      <div class="singer-desc">
        <div class="singer">
          <span class="tags">歌手</span>
          <h2 class="name">{{singList.name}}</h2>
        </div>
        <div class="collect">
          <el-button type="primary">收藏</el-button>
        </div>
        <div class="sing-num">歌曲： {{singList.musicSize}}</div>
        <div class="singer-Album">专辑： {{singList.albumSize}}</div>
        <div class="sing-mv">MV： &nbsp;{{singList.mvSize}}</div>
      </div>
    </div>
    <!-- Tab栏 -->
    <el-tabs v-model="activeName">
      <el-tab-pane label="专辑" name="first">
        <singer-album :album="album" :album-list="albumList" />
      </el-tab-pane>
      <el-tab-pane label="MV" name="second">
        <singer-mv :mv="mv" />
      </el-tab-pane>
      <el-tab-pane label="歌手详情" name="third">
        <singer-msg :desc="desc" />
      </el-tab-pane>
      <el-tab-pane label="相似歌手" name="fourth">
        <singer-simple :artists="artists" @simClick="simClick" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getSingerDetail, getSingerAlbum, getAlbum, getSingerMv, getSingerDesc, getSimpleSinger } from '@/api/singer'

import SingerMsg from './singerDetailMsg'
import SingerAlbum from './singerAlbum'
import SingerMv from './singerMv'
import SingerSimple from './simpleSinger'

export default {
  name: 'SingerDetail',
  created() {
    this.getSingerData()
  },
  data() {
    return {
      id: window.sessionStorage.getItem('singerId'),
      singList: {},
      activeName: 'first',
      // 专辑
      album: [],
      albumList: [],
      // mv
      mv: [],
      // 描述
      desc: {},
      // 相似歌手
      artists: []
    }
  },
  methods: {
    async getSingerData() {
      const { data: { data: res } } = await getSingerDetail(this.id)
      const { data: album } = await getSingerAlbum(this.id)
      const { data: mv } = await getSingerMv(this.id)
      const { data: desc } = await getSingerDesc(this.id)
      const { data: sim } = await getSimpleSinger(this.id)
      this.singList = res.artist
      this.album = album.hotAlbums
      this.mv = mv.mvs
      this.desc = desc
      this.artists = sim.artists
      this.album.map(async item => {
        const { data: res } = await getAlbum(item.id)
        this.albumList.push(res)
      })
    },
    simClick() {
      this.id = window.sessionStorage.getItem('singerId')
      this.getSingerData()
    },
  },
  components: {
    SingerMsg,
    SingerAlbum,
    SingerMv,
    SingerSimple
  }
}
</script>

<style lang="less" scoped>
.singer-detail {
  padding-top: 20px;
  .detail-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .singer-img {
      width: 300px;
      height: 240px;
      img {
        width: 100%;
      }
    }
    .singer-desc {
      flex: 1;
      margin-left: 25px;
      .singer {
        display: flex;
        align-items: center;
        .tags {
          border: 1px solid hotpink;
          padding: 8px;
          color: red;
          font-size: 25px;
          font-weight: 700;
          margin-right: 8px;
        }
      }
      .collect {
        margin: 10px 0;
      }
      .sing-num {
        margin-top: 10px;
      }
      .singer-Album {
        margin: 10px 0;
      }
    }
  }
}
</style>